<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">会员中心</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg18.png')" mode="widthFix"></image>
			<view class="bg_content">
				<view class="my_box">
					<image class="my_bg" :src="getImgSrc('/static/bg19.png')" mode="widthFix"></image>
					<view class="my_content">
						<view class="avatar">
							<image :src="avatar" mode="scaleToFill"></image>
						</view>
						<view class="text_box">
							<view class="name">{{phone}}</view>
							<view class="text" v-if="is_vip == 0">您当前未开通 vip</view>
							<view class="text" v-if="is_vip == 1">有效期至 {{vip_date}}</view>
						</view>
					</view>
				</view>
				
				<view class="page_title">
					<view class="title">购买会员</view>
					<!-- <view class="arrow iconfont icon-xiangyou1"></view> -->
				</view>
				
				<view class="buy_box">
					<block v-for="(item,index) in buyData">
						<view class="menu" :class="index == select ? 'menucolor' : ''" :data-index="index" :data-id="item.id" :data-price="item.price" @tap="setBuyMenu">
							<view class="time">{{item.title}}</view>
							<view class="money"><span>￥</span>{{item.price}}</view>
							<view class="rule">{{item.unit_price}}/天</view>
							<view class="text">{{item.text}}</view>
						</view>
					</block>
				</view>
				
				<view class="rule_box">注：点击开通/续费视为您已阅读并同意
				<text style="color: #FC5D20;" :data-url="'/pages/public/art_detail?id=1'" @click="gotopage">《用户协议》</text>
				<text style="color: #FC5D20;" :data-url="'/pages/public/art_detail?id=2'" @click="gotopage">《隐私政策》</text>
				本产品为虚拟内容服务，开通后将无法退款，请您理解。</view>
				
				<swiper class="swiper_box" :vertical="true" :display-multiple-items="2" :autoplay="true" :interval="3000" :duration="200" :indicator-dots="false">
					<block v-for="(item, index) in order" :key="index">
						<swiper-item style="height: 100%;">
							<view class="swiper-item" style="height: 100%;">
								<view class="swiper_list">
									<view class="name">{{item.nickname}}</view>
									<view class="phone">{{item.phone}}</view>
									<view class="addre">{{item.city}}</view>
									<view class="text">开通vip</view>
								</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
				
				<view class="page_title">
					<view class="title">会员特权</view>
					<!-- <view class="arrow iconfont icon-xiangyou1"></view> -->
				</view>
				
				<view class="privilege_box">
					<view class="privilege">
						<view class="icon">
							<image src="../../../static/menu/menu26.png" mode="widthFix"></image>
						</view>
						<view class="title">朋友圈同步</view>
						<view class="text">每天自动同步朋友圈车源</view>
					</view>
					<view class="privilege">
						<view class="icon">
							<image src="../../../static/menu/menu20.png" mode="widthFix"></image>
						</view>
						<view class="title">无限联系</view>
						<view class="text">无限联系</view>
					</view>
					<view class="privilege">
						<view class="icon">
							<image src="../../../static/menu/menu21.png" mode="widthFix"></image>
						</view>
						<view class="title">加群卡</view>
						<view class="text">加入会员批车群</view>
					</view>
					<view class="privilege">
						<view class="icon">
							<image src="../../../static/menu/menu22.png" mode="widthFix"></image>
						</view>
						<view class="title">实时批发</view>
						<view class="text">实时批发</view>
					</view>
					<view class="privilege">
						<view class="icon">
							<image src="../../../static/menu/menu23.png" mode="widthFix"></image>
						</view>
						<view class="title">定制求购</view>
						<view class="text">定制求购</view>
					</view>
					<view class="privilege">
						<view class="icon">
							<image src="../../../static/menu/menu24.png" mode="widthFix"></image>
						</view>
						<view class="title">海量车源</view>
						<view class="text">海量车源</view>
					</view>
					<view class="privilege">
						<view class="icon">
							<image src="../../../static/menu/menu25.png" mode="widthFix"></image>
						</view>
						<view class="title">定金保障</view>
						<view class="text">定金保障</view>
					</view>
					<view class="privilege">
						<view class="icon">
							<image src="../../../static/menu/menu27.png" mode="widthFix"></image>
						</view>
						<view class="title">尊贵身份标识</view>
						<view class="text">凸显V身份标识</view>
					</view>
					<view class="privilege">
						<view class="icon">
							<image src="../../../static/menu/menu28.png" mode="widthFix"></image>
						</view>
						<view class="title">微信推送</view>
						<view class="text">推广3000+车群</view>
					</view>
				</view>
				<view class="clear_box"></view>
				<view class="clear_box"></view>
				
				<view class="confirm" v-if="is_vip==0" @tap="autoShowBox">立即开通</view>
				<view class="confirm" v-if="is_vip==1" @tap="autoShowBox">立即续费</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select:0,
				page:1,
				scrrol:false,
				info:'',
				buyData:[
					{
						time:'1个月',
						money:'88',
						rule:'2.9/天',
						text:'超划算'
					},
					{
						time:'3个月',
						money:'88',
						rule:'2.0/天',
						text:'超划算'
					},
					{
						time:'1年',
						money:'88',
						rule:'1.0/天',
						text:'超划算'
					}
				],
				phone:'',
				avatar:this.getImgSrc('/static/tx01.png'),
				is_vip:0,
				vip_date:'',
				order:[{nickname:'多多',phone:'137*****136',city:'福州市'}],
				vipId:0,
				price:'',
				space:'',
			}
		},
		onLoad(e) {
			this.loadData();
		},
		methods: {
			setBuyMenu(e){
				let index = e.currentTarget.dataset.index;
				this.select = index;
				this.vipId = e.currentTarget.dataset.id;
				this.price = e.currentTarget.dataset.price;
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				that.Net._get('other/member', {}, res => {
					if (res.code == 1) {
						that.buyData = res.data.vip;
						that.is_vip = res.data.is_vip;
						that.vip_date = res.data.user.vip_date;
						that.order = res.data.order;
						that.vipId = that.buyData[0].id;
						that.phone = res.data.user.x_phone;
						that.avatar = res.data.user.headimg;
					}
				});
			},
			autoShowBox(){
				uni.showLoading({
					title: '请稍后'
				});
				let param = {
					'id':this.vipId,
				};
				this.Net._post('auth/team/create_order',param, res => {
					let ret = res.data;
					if (res.code == 1) {
						uni.hideLoading();
						this.order_data = res.data;
						this.real_confirm();
					} else {
						uni.hideLoading();
						this.Msg.Fail(ret.msg);
					}
				});
			},
			async real_confirm() {
				let that = this;
				let param = {
						order_id: that.order_data.id,
						money: that.order_data.pay_price,
						plat: 'miniapp'
					};
				that.Net._post('auth/team/vip_pay', param, rex => {
					if (rex.code == 1) {
						let orderData = rex.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp:orderData.timeStamp,
							nonceStr: orderData.nonceStr,
							package: orderData.package,
							signType: orderData.signType,
							paySign: orderData.paySign,
							success: function(res) {
								uni.showModal({
									title: '提示',
									content: '购买成功',
									showCancel: false,
									success: function(res) {
										uni.setStorageSync('info_edit', 1);
										if (res.confirm) {
											//console.log('用户点击确定');
											uni.switchTab({
												url: '/pages/personalcenter/personalcenter'
											});
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.switchTab({
									url: '/pages/personalcenter/personalcenter'
								});
							}
						});
					}
				});	
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
		  // that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
		  //   if (res.code == 200) {
		  //     //console.log(res)
		  //     if (res.data.data == '') {
		  //       uni.showToast({
		  //         title: '已经是最后一页了',
		  //         duration: 2000,
		  //         icon: 'none'
		  //       });
		  //     } else {
		  //       that.info = that.info.concat(res.data.data); //将数据拼接在一起
		  //     }
		  //   } else if (res.code == 0) {
		  //     that.Msg.Success(res.msg, res => {});
		  //   }
		  // });
		},
	}
</script>

<style>
	page{
		background-color: #fff;
	}
	
	.header{
		background-color: transparent !important;
		height: 18vw !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.header .back{
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #FFE5B0 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.my_box{
		width: 100%;
		position: relative;
		margin-top: 6vw;
	}
	
	.my_box .my_bg{
		width: 100%;
	}
	
	.my_box .my_content{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		padding-left: 4%;
	}
	
	.my_box .my_content .avatar{
		width: 10vw;
		height: 10vw;
		margin-right: 3vw;
	}
	
	.my_box .my_content .avatar image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.my_box .my_content .text_box{
		flex: 1;
	}
	
	.my_box .my_content .text_box .name{
		font-size: 4vw;
		color: #481800;
		font-weight: bold;
	}
	
	.my_box .my_content .text_box .text{
		font-size: 3.2vw;
		color: #815317;
		margin-top: 2vw;
	}
	
	.page_title{
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}
	
	.page_title .title{
		font-size: 4.5vw;
		color: #333;
		font-weight: bold;
		flex: 1;
	}
	
	.page_title .arrow{
		font-size: 4vw;
		color: #999;
	}
	
	.buy_box{
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}
	
	.buy_box .menu{
		width: 30.6666%;
		margin-left: 4%;
		background-color: #fff;
		border: 1px solid #E5E7E7;
		border-radius: 3vw;
		padding: 3vw 0;
		height: 37vw;
	}
	
	.buy_box .menu:nth-child(1){
		margin-left: 0;
	}
	
	.buy_box .menu .time{
		font-size: 3.5vw;
		color: #333;
		text-align: center;
		font-weight: bold;
	}
	
	.buy_box .menu .money{
		font-size: 6vw;
		color: #71471F;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-top: 1vw;
		font-weight: bold;
	}
	
	.buy_box .menu .money span{
		font-size: 3.5vw;
		margin-bottom: 1vw;
	}
	
	.buy_box .menu .rule{
		font-size: 3.5vw;
		color: #5D676F;
		text-align: center;
	}
	
	.buy_box .menu .text{
		font-size: 3vw;
		color: #5D676F;
		text-align: center;
		white-space: pre-wrap;
		margin-top: 1vw;
	}
	
	.menucolor{
		border: 1px solid #FEC747 !important;
		background-color: #FFF6DA !important;
	}
	
	.rule_box{
		width: 100%;
		font-size: 3.2vw;
		color: #666666;
		margin-top: 4%;
	}
	
	.swiper_box{
		width: 100%;
		height: 24vw;
		background-color: #F7F7F7;
		padding: 2vw 5vw;
		border-radius: 3vw;
		margin-top: 4%;
	}
	
	.swiper_box .swiper_list{
		width: 100%;
		height: 10vw;
		display: flex;
		align-items: center;
	}
	
	.swiper_box .swiper_list .name{
		font-size: 3.5vw;
		color: #666666;
		flex: 1;
	}
	
	.swiper_box .swiper_list .phone{
		font-size: 3.5vw;
		color: #666666;
		flex: 1;
		margin-left: 1vw;
	}
	
	.swiper_box .swiper_list .addre{
		font-size: 3.5vw;
		color: #666666;
		flex: 1;
		margin-left: 1vw;
	}
	
	.swiper_box .swiper_list .text{
		font-size: 3.5vw;
		color: #FF5D14;
		margin-left: 1vw;
	}
	
	.privilege_box{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	
	.privilege_box::after {
		flex: auto;
		content: '';
	}
	
	.privilege_box .privilege{
		width: 30.666666%;
		background-color: #F3F3F3;
		border-radius: 3vw;
		margin-left: 4%;
		padding: 4vw 0;
		margin-top: 4%;
	}
	
	.privilege_box .privilege:nth-child(3n + 1){
		margin-left: 0;
	}
	
	.privilege_box .privilege .icon{
		width: 13vw;
		margin: 0 auto;
	}
	
	.privilege_box .privilege .icon image{
		width: 100%;
	}
	
	.privilege_box .privilege .title{
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		text-align: center;
		margin-top: 2vw;
	}
	
	.privilege_box .privilege .text{
		font-size: 3.2vw;
		color: #9C6D19;
		text-align: center;
		margin-top: 2vw;
	}
	
	.confirm{
		color: #531900;
		background: linear-gradient(to right, #FDE59B, #FEC746);
	}
	
	
</style>
